/*  ========== 基本设置 ==============
根据显示设备窗口的宽高比例 设置三种版面，横版hv、竖版dv、方版sv；
			width/height>1.2 : 横版 hv
		0.7<width/height<1.2 : 方版 sv
			width/height>0.7 : 竖版 dv
	预定为横版【设计和调试使用】		

配色采用预设固定五色搭配--桔橙黄为前景色，灰黑为文字或背景底色；
	--precolor-one:#de4f3f;--precolor-two:#F59D2F;--precolor-thr:#FFEF6C;  
    --precolor-fou:#78736C;--precolor-fiv:#282524;
	--precolor-one:rgb(222,79,63);--precolor-two:rgb(245,157,47);--precolor-thr:rgb(255,239,108);  
    --precolor-fou:rgb(120,115,108);--precolor-fiv:rgb(40,37,36);    


在线图标、去除预定格式、固定页眉、页脚格式
*/
:root{
	    --clientWidth: 1280px;
      	--availHeight: 768px; 
      	--bgcolor:#eaeaea;
      	--color:#282524;
      	--canvasWidth: 1280px;
      	--anchortop:70px;
		--isclient:none;

/* ===分别为红色、橙色、黄色、灰色、深色== */
      	--precolor-one:#de4f3f;  
      	--precolor-two:#F59D2F;  
      	--precolor-thr:#FFEF6C;  
      	--precolor-fou:#eaeaea; 
      	--precolor-fiv:#282524;
}

/* ============== global =========== */
html{
	font-family:Microsoft YaHei, SimSun;
	height:100%;
	width:100%;
	scroll-padding-top: var(--anchortop);
	scroll-behavior: smooth;
}
body{
	padding:0;
	margin:0;
	border:0;
	background-color:var(--precolor-fou);
	color:var(--color);
	width: 100%;
	height:100%;
	max-height: calc(var(--availHeight) * 2);
	overflow: auto;
}
a{
	text-decoration:none;
	outline: none;	
	color: var(--color);
	word-break: break-all;
	white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
p{margin: 0;}
button {
	border: 0;
	outline: none;
	background-color: transparent;
}
img{
	display: block;
	border: none;
	padding:0;
	margin: 0;
	background: transparent;
}
.floating_image{
	position: fixed;
	top: 200px;
	right: 100px;
	width: 100px;
	height: 100px;
	z-index: 9; 
	transform: translateY(-20%);
	transform-origin: center top;
	animation: shake_img 1s infinite;
}
@keyframes shake_img {
0% { transform: translateY(0); }
25% { transform: translateY(-.5rem); }
50% { transform: translateY(0); }
75% { transform: translateY(.5rem); }
100% { transform: translateY(0); }
} 
.return-previous{
	position: fixed; 
	bottom: 3rem;
	right: .5rem;
	width: 2rem;
	height: 2rem;
	display: none;
	justify-content: center;
	align-items: center;
	color: var(--color);
	border-radius: 50%;
	background:var(--precolor-fou);	
	z-index: 3;
}
.return-top{
	position: fixed; 
	bottom: .5rem;
	right: .5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color);
	border-radius: 50%;
	background:var(--precolor-fou);	
	z-index: 3;
}
/* .trans-el{
    opacity: 0.5; 
} */
.hidden {
    display: none!important;
}
/*定义Placeholder*/
*::-webkit-input-placeholder {
	color: var(--color);
}

/* 在线图标字体链接服务使用*/
@font-face {
	font-family: 'iconfont';  /* Project id 4708575 */
	src: url('//at.alicdn.com/t/c/font_4708575_x0s1j64ajgs.woff2?t=1731549271854') format('woff2'),
		 url('//at.alicdn.com/t/c/font_4708575_x0s1j64ajgs.woff?t=1731549271854') format('woff'),
		 url('//at.alicdn.com/t/c/font_4708575_x0s1j64ajgs.ttf?t=1731549271854') format('truetype');
  }
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*--页眉横条内容 start --*/
.global-header{
	position: fixed;
	top:0rem;
    display: flex;
    flex-direction: row;  
    justify-content: space-between;      
    width: 100vw;  
	height:3rem;
	background-color:var(--precolor-fou);
    z-index: 3;
}
.header-item{
	width: 20vw;
    display: flex;
    flex-direction: row;  
    justify-content: center;  
    -webkit-align-items: center;    
    align-items: center;
	margin:0 auto;
}
.header-item-content{
    display: block;  	
}
.header-item-img{
	width:1.8rem;
	height: 1.8rem;
	display: block;
	border-radius: 50%;
	border: thick groove var(--precolor-fiv);
	background-color:var(--precolor-fou);
}
	
.header-card{
    display: flex;
    flex-direction: column;  
    justify-content: space-around;  
}
.header-cn{
	text-align: center;	
	font-size: 1rem;
	font-weight: bold;
	padding:.1rem;
	color:var(--precolor-fiv);	
}
.header-en{
	padding-left:.5rem;	
	font-size: 1rem;
	padding:.1rem,0,.1rem,0;
	color:var(--precolor-thr);
}
.header-item:hover{
    background: var(--precolor-thr);    	
}
.banner{
	position: fixed;
    display: none;
    flex-direction: row;  
    justify-content: space-between; 
	align-items: center;     
    width: 100vw;    
	height:3rem;
	background-color:var(--precolor-fou);
    z-index: 3;
}
.banner .inspr{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center; 
	height:3rem;
	margin-left: .2rem;
	width:70vw;
}
.banner .inspr img{
	height: 2.5rem;
}
.banner .message{
	color: var(--precolor-one);
	height:2rem;
	line-height: 2rem;
	margin-right: .2rem;
	width:15vw;
}
.banner .regnew{
	color: var(--precolor-one);
	height:2rem;
	line-height: 2rem;
	margin-right: .2rem;
	width:15vw;
}
.banner .message i{
	font-size:1.5rem;
}
.banner .regnew i{
	color: var(--precolor-one);
	font-size:1.5rem;
}

/* 弹窗背景 */	
.shadow{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 5rem; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
} 

/* paytome窗口 */
.paytome{
	margin: auto;
    width: 80%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation-name: zoom;
    animation-duration: 0.6s;
} 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
.paytome img{width:50%;margin: 0;}
.paytome div{color: var(--precolor-thr);font-weight: bold;}

.modal-content{width:50%;margin: 0;background-color:var(--precolor-thr);
}
 
/* 弹窗关闭按钮 */
.close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    color: #f1f1f1;
    font-size: 2rem;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*--页眉横条内容 end --*/


/*=========页脚内容=============*/
.global-footer{
    display: flex;
    flex-direction: row;  
    justify-content: space-between;
	background-color:var(--bgcolor);
}
.footer-container{
	width:100vw;
	margin:.5rem 1.5rem;
}
.footer-recom{
    display: flex;
    flex-direction: row;  
    justify-content:space-between;
    align-items: center;	
}

.footer-logo{
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color:var(--bgcolor);
	box-shadow: 0 0 .2rem var(--precolor-one);
	margin-bottom: .1rem;
	transition: color .3s ease-out;

}
.footer-miccontain{
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content:center;	
}
.footer-mic{
	clear: both;
    display: block;
    margin: auto;
    margin-bottom: .1rem;
	width: 3rem;
	height: 3rem;
	background-color:var(--bgcolor);
	background: center no-repeat;
}
.footer-recom div{
	display:flex;	
 	align-items: center;
	justify-content: center;
	font-size: .8rem;
	color: var(--precolor-fiv);
}
.footer-about{
	 word-wrap: break-word;
}
.footer-about div{
    font-weight: bold;
    color:var(--precolor-fiv);
}
.beian{
    display: flex;
    flex-direction: row;  
    justify-content: center;
    align-items: center;
	height: 1rem;
	margin-bottom: 3rem;
}
.beian span{
    align-items: center;
	font-size: .8rem;
}
.beian img{width: .8rem;height: .8rem;}

/*--产品推荐页内容 start --*/
.pay_link{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content:space-around;
	align-items: center;
	overflow:hidden;
	background-color:var(--precolor-fou);
	margin:.1rem auto;
	font-size: 1rem;
	font-weight: bold;
	text-decoration:underline;
  }
  .facilitate{
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content:space-around;
	align-items: flex-start;
	overflow:hidden;
	background-color:var(--precolor-fou);
	margin:.5rem auto;
	font-size: 1rem;
	font-weight: normal;
  }
  .facilitate p{
	display: flex;
	font-size: .8rem;
	font-weight: normal;
  }
/*--产品推荐页内容 end --*/

/*=======当小屏时，将导航栏置于底部========*/
@media  screen and (max-width:500px){
	.global-header{
		top:auto;
		bottom: 0;		
	}
	.return-top{
		bottom: 3rem;
	}
	.return-previous{bottom: 5.5rem;}
	.banner{
		display: flex;
		top:0rem;
	}
}